<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>



    <div id="app">

        <section style="display: none;">

            <form id="frmProduct">


                <input type="text" placeholder="单号" v-model="customer.num">
                <input type="text" placeholder="客户名称" v-model="customer.name">
                <input type="text" placeholder="联系地址 " v-model="customer.address">
                <input type="text" placeholder="联系电话" v-model="customer.tel">
                <input type="text" placeholder="日期" v-model="customer.date">
                <input type="button" value="提交数据">

            </form>

            <hr>

        </section>



        <main>


            <div class="toolbar">

                <div style="display: flex;align-items: center;font-size: 15px;"><span>订单编号:YHDN00000001</span></div>
                <div style="display: flex;align-items: center;justify-content: flex-end;">
                    <button @click="addRow" :disabled="isEditing">
                        添加记录
                    </button>

                    <button :disabled="isEditing || productList.length === 0">
                        提交数据
                    </button>

                    <button :disabled="isEditing || productList.length === 0" @click="printData">
                        打印数据
                    </button>
                </div>



            </div>


            <section class="row">

                <div class="cell" style="font-size: 15px;" v-for="(item,index) in fieldList" :key="index">
                    {{ item }}
                </div>

                <div class="cell" style="font-size: 15px;">
                    操作
                </div>

            </section>



            <section class="row" v-for="(row,index) in productList" :key="index">

                <div class="cell"><span>{{ index+1 }}</span></div>

                <div class="cell">
                    <input id="inputref" v-if="row.isEditing" type="text" v-model="row.name">
                    <span v-else>{{ row.name }}</span>
                </div>
                <div class="cell">
                    <input v-if="row.isEditing" type="text" v-model="row.price">
                    <span v-else>{{ row.price }}</span>
                </div>
                <div class="cell">
                    <input v-if="row.isEditing" type="text" v-model="row.total">
                    <span v-else>{{ row.total }}</span>
                </div>
                <div class="cell">
                    <input v-if="row.isEditing" type="text" v-model="row.totalprice">
                    <span v-else>{{ row.totalprice }}</span>
                </div>
                <div class="cell">
                    <input v-if="row.isEditing" type="text" v-model="row.comment" 
                    @keydown.tab.prevent="handleTab(row)" 
                    @keydown.enter.prevent="handleEnter(row)"
                    >
                    <span v-else>{{ row.comment }}</span>
                </div>

                <div class="cell">

                    <button v-if="!row.data" :disabled="isEditing" @click="editRow(row)">
                        编辑
                    </button>
                    <button v-else  @click="cancelRow(index,row)">
                        取消
                    </button>
                    <button @click="deleteRow(index,row)">
                        删除
                    </button>
                    <button @click="saveRow(row)" :disabled="!row.isEditing">
                        保存
                    </button>

                </div>

                </section>

                <div class="footerbar">

                        <h1 v-if="productList.length === 0">No Data</h1>

                        <span v-else>共计{{ productList.length }}条记录</span>

                </div>




        </main>

<!-- 打印区域 -->
        <article>

            <h1 style="text-align: center; padding: 10px 0;">银河电脑有限公司</h1>

            <section class="printrow" v-for="(row,index) in productList" :key="index">

                <div class="printcell">                   
                    <span>{{ index+1 }}</span>
                </div>
                <div class="printcell">                   
                    <span>{{ row.name }}</span>
                </div>
                <div class="printcell">                   
                    <span>{{ row.price }}</span>
                </div>
                <div class="printcell">                   
                    <span>{{ row.total }}</span>
                </div>
                <div class="printcell">                   
                    <span>{{ row.totalprice }}</span>
                </div>
                <div class="printcell">                   
                    <span>{{ row.comment }}</span>
                </div>
               
                


            </section>


        </article>


    </div>

    <script type="module">
        import { createApp, ref, reactive, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            setup() {


                const fieldList = ["行号","品名", "单价", "数量", "总价", "备注"]


                const customer = reactive({

                    name: "清水景观",
                    num: "YHDN00000001",
                    address: "",
                    date: "",
                    tel: ""

                });


                const isEditing = computed(() => {

                    return productList.value.some(item => item.isEditing)
                })

                const productList = ref([]);



                const addRow = () => {

                    productList.value.push({
                        name: "",
                        price: "",
                        total: "",
                        totalprice: "",
                        comment: "",
                        isEditing: true
                    })


                    setTimeout(() => {

                        let inputref = document.getElementById("inputref");
                        inputref.focus();


                    }, 100)

                }

                const saveRow = (row) => {
                    row.isEditing = false
                }
                const deleteRow = (index, row) => {

                    productList.value.splice(index, 1)

                }
                const editRow = (row) => {
                    row.isEditing = true
                    row.data = { ...row }

                    setTimeout(() => {

                        let inputref = document.getElementById("inputref");
                        inputref.focus();


                    }, 100)
                }

                const cancelRow = (index, row) => {

                    let row_temp = { ...row.data }
                    row_temp.isEditing = false
                    productList.value[index] = row_temp
                    console.log(productList);

                }

                const printData = () =>{

                        window.print()
                }

                const handleTab = (row)=>{

                        saveRow(row)
                        addRow()
                                        
                }
                const handleEnter = (row)=>{

                        saveRow(row)
                        
                                        
                }

                return {

                    customer,
                    productList,
                    fieldList,
                    addRow,
                    saveRow,
                    editRow,
                    deleteRow,
                    cancelRow,
                    isEditing,
                    printData,
                    handleTab,
                    handleEnter

                }
            }
        }).mount('#app')
    </script>







</body>

</html>